<template>
  <div style="margin-top:50px;">
    <div class="Vbox">虚拟键盘</div>
    <el-row>
      <el-col :span="24" class="exp">
        <el-button
          :type="primary1"
          @click="
            () => {
              this.chooes = 1;
              this.primary1 = 'primary';
              this.primary2 = 'null';
              this.primary3 = 'null';
              this.primary4 = 'null';
              this.primary5 = 'null';
            }
          "
          >小王的综合成绩=<b style="color:yellow;">{{ result1 }}</b></el-button
        >
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="exp"
        ><el-button
          :type="primary2"
          @click="
            () => {
              this.chooes = 2;
              this.primary1 = 'null';
              this.primary2 = 'primary';
              this.primary3 = 'null';
              this.primary4 = 'null';
              this.primary5 = 'null';
            }
          "
          >小明的综合成绩=<b style="color:yellow;">{{ result2 }}</b></el-button
        >
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="exp"
        ><el-button
          :type="primary3"
          @click="
            () => {
              this.chooes = 3;
              this.primary1 = 'null';
              this.primary2 = 'null';
              this.primary3 = 'primary';
              this.primary4 = 'null';
              this.primary5 = 'null';
            }
          "
          >小张的综合成绩=<b style="color:yellow;">{{ result3 }}</b></el-button
        >
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="exp"
        ><el-button
          :type="primary4"
          @click="
            () => {
              this.chooes = 4;
              this.primary1 = 'null';
              this.primary2 = 'null';
              this.primary3 = 'null';
              this.primary4 = 'primary';
              this.primary5 = 'null';
            }
          "
          >小李的综合成绩=<b style="color:yellow;">{{ result4 }}</b></el-button
        >
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24" class="exp"
        ><el-button
          :type="primary5"
          @click="
            () => {
              this.chooes = 5;
              this.primary1 = 'null';
              this.primary2 = 'null';
              this.primary3 = 'null';
              this.primary4 = 'null';
              this.primary5 = 'primary';
            }
          "
          >小华的综合成绩=<b style="color:yellow;">{{ result5 }}</b></el-button
        >
      </el-col>
    </el-row>

    <el-row class="keyboardbox">
      <el-button
        type="success"
        v-for="(item, index) in numlist"
        :key="index"
        @click="recordtext(item)"
        class="btn"
        >{{ item }}</el-button
      >
    </el-row>
    <el-row> </el-row>
  </div>
</template>

<script>
export default {
  created() {
    this.result1 = this.$store.state.answer[13];
    this.result2 = this.$store.state.answer[14];
    this.result3 = this.$store.state.answer[15];
    this.result4 = this.$store.state.answer[16];
    this.result5 = this.$store.state.answer[17];
  },
  data() {
    return {
      result1: "",
      result2: "",
      result3: "",
      result4: "",
      result5: "",
      chooes: "1",
      primary1: "primary",
      primary2: "null",
      primary3: "null",
      primary4: "null",
      primary5: "null",
      numlist: [1, 2, 3, 4, 5, 6, 7, 8, 9, ".", 0, "删除"],
    };
  },
  methods: {
    updata() {
      console.log(this.$store.state.pagenum, this.$store.state.answer);
      parent.postMessage(this.$store.state, "*");
    },
    recordtext(item) {
      if (this.chooes == 1) {
        if (item === "删除") {
          this.result1 = this.result1.substr(0, this.result1.length - 1);
        } else {
          this.result1 = this.result1 + item;
        }
        this.$store.state.answer[13] = this.result1;
      } else if (this.chooes == 2) {
        if (item === "删除") {
          this.result2 = this.result2.substr(0, this.result2.length - 1);
        } else {
          this.result2 = this.result2 + item;
        }
        this.$store.state.answer[14] = this.result2;
      } else if (this.chooes == 3) {
        if (item === "删除") {
          this.result3 = this.result3.substr(0, this.result3.length - 1);
        } else {
          this.result3 = this.result3 + item;
        }
        this.$store.state.answer[15] = this.result3;
      } else if (this.chooes == 4) {
        if (item === "删除") {
          this.result4 = this.result4.substr(0, this.result4.length - 1);
        } else {
          this.result4 = this.result4 + item;
        }
        this.$store.state.answer[16] = this.result4;
      } else if (this.chooes == 5) {
        if (item === "删除") {
          this.result5 = this.result5.substr(0, this.result5.length - 1);
        } else {
          this.result5 = this.result5 + item;
        }
        this.$store.state.answer[17] = this.result5;
      }
      this.updata();
    },
  },
};
</script>

<style scoped>
button {
  margin: 10px;
  font-size: 20px;
  font-weight: 100;
}
.btn {
  width: 60px;
  height: 60px;
}
.exp {
  margin-left: -270px;
}
.exp button {
  width: 280px;
}
.exp span {
  overflow: auto;
}
.keyboardbox {
  position: absolute;
  top: 360px;
  left: 300px;
  width: 250px;
  height: 330px;
  font-size: 20px;
  border: 1px solid #000;
}
.Vbox {
  position: absolute;
  top: 320px;
  left: 300px;
}
</style>
